<template>
  <div class="h-4">【大区数据信息】</div>
  <!-- 横向柱状图 -->
  <div ref="target" class="w-full flex-1"></div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );

// 1、初始化echart实例
let myChart = null;
const target = ref(null); // 此处的target与div中的ref=“target”一致
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});

// 2、构建option配置对象
const renderChart = () => {
  const options = {
    // xAixs表示x轴的展示数据
    xAxis: {
      show: false, // 不展示x轴线
      type: 'value', // 将x轴作为数据展示
      // max 最大值，为了防止顶在最顶边上的位置
      max: function (value) {
        return parseInt(value.max * 1.2);
      },
    },
    // y轴展示数据
    yAxis: {
      type: 'category', // y轴作为类别用
      data: props.data.map((item) => item.name), // 展示的数据,此处作为类别，展示的是类别
      inverse: true, // 反向展示，从上到下, 默认是从下到上
      axisLine: {
        show: false, // 不展示轴线
      },
      axisTick: false, // 不展示颗度
      axisLabel: {
        // 文字设置
        solor: '#9eb1c8',
      },
    },
    // 图标绘制的位置，对应上下左右
    grid: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      containlabel: true, // grid 区域是否包含坐标轴的刻度标签
    },
    // 核心配置,多个对象展示多个
    series: [
      {
        type: 'bar', // 图标的类型，bar为柱形图
        data: props.data.map((item) => ({
          name: item.name,
          value: item.value,
        })), // 每条轴对应的数据
        showBackground: true, // 是否展示背景色
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
        itemStyle: {
          color: '#5d98ce', // 柱状图形的颜色
          barBorderRadius: 5, // 图形尽头的圆角
          shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
          shadowBlur: 5, // 阴影模糊
        },
        barWidth: 12, // 每个轴的宽度
        // 轴上的文字
        label: {
          show: true,
          position: 'right',
          textStyle: {
            color: '#fff',
          },
        },
      },
    ],
  };

  // 3、通过实例.setOption
  myChart.setOption(options);
};

watch(() => props.data, renderChart);
</script>
<style lang="scss" scoped></style>
